
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

// 添加类型 注册事件
$('.add').on('click',function () {
  const index = layer.open({
    type: 1, 
    title:'添加类别',
    area: ['500px', '300px'], // 宽高
    content: add_str, //这里content是一个普通的String
    success(){ // 弹窗成功后的回调
      console.log('弹窗弹出后的函数数执行');

      $('form').on('submit',function (e) {
        e.preventDefault()
        // 获取数据 === > 发送请求
        axios({
          url:'http://api-breakingnews-web.itheima.net/my/article/addcates',
          headers: { 'Authorization': localStorage.getItem('token') },
          method:'post',
          data:$(this).serialize()
        }).then(res=>{
          if(res.data.status === 0){
            layer.msg(res.data.message)
            console.log(res);
            // (1) 关闭弹窗
            layer.close(index)
            // (2) 渲染页面 
            load()
          }
       
        })

      })
    }
  });
})

// 删除功能
$('tbody').on('click','.delete',function () {
  // 有一个提示框  confirm  确定 再删除
  // /my/article/deletecate/:id
  const id = $(this).attr('myid')
  // 方式一
  // const that = this
  // 方式二
  // 箭头函数

  layer.confirm('亲,是否要删除我?', { icon: 3, title: '温馨提示' }, (index)=> {
    axios({
      url:`http://api-breakingnews-web.itheima.net/my/article/deletecate/${id}`,
      method:'get',
      headers: { 'Authorization': localStorage.getItem('token') },
    }).then(res=> {
      layer.msg(res.data.message)
      if(res.data.status === 0){
        // 渲染页面
        // 方式一: 重新渲染页面
        // load()
        // 方式二: 删除当前这行
        console.log(this);
        $(this).parents('tr').remove()  // 让当前这一行自爆
      }
      console.log(res);
    })
  });

})

//编辑功能
$('tbody').on('click','.edit',function () {
  // 分别获取 name  alias id 
  const Id = $(this).attr('myid')
  // const name = $(this).attr('data-name')
  const name = $(this).data('name')
  const alias = $(this).data('alias')

  const index = layer.open({
    type: 1, 
    title:'编辑类别',
    area: ['500px', '300px'], // 宽高
    content: edit_str, //这里content是一个普通的String
    success(){ // 弹窗成功后的回调
      // 快速赋值、取值的操作   -- 第一个参数 （指定的form表单  通过 lay-filter=""  第二个参数 存在 对象 (赋值)）
      form.val('edit',{
        name:name, 
        alias:alias,
        Id  // 简写
      })

      // 修改的功能
      $('form').on('submit',function (e) {
        e.preventDefault()
        axios({
          url:'http://api-breakingnews-web.itheima.net/my/article/updatecate',
          headers: { 'Authorization': localStorage.getItem('token') },
          method:'post',
          data:$(this).serialize()
        }).then(res=>{
          layer.msg(res.data.message)
          if(res.data.status === 0){
            // (1) 关闭弹窗
            layer.close(index)
            // (2) 渲染页面 
            load()
          }
       
        })
      })
    }
  });


})

// 渲染功能
function load() {
  axios({
    url:'http://api-breakingnews-web.itheima.net/my/article/cates',
    headers: { 'Authorization': localStorage.getItem('token') },
    method:'get',
  }).then(res=>{
    console.log(res);
    if(res.data.status === 0){
      // 清除在遍历渲染
      $('tbody').empty()
      res.data.data.forEach((obj,index) => {
        const theTr = `<tr>
                <td>${obj.name}</td>
                <td>${obj.alias}</td>
                <td>
                  <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
            
                  <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                </td>
              </tr>`
        $('tbody').append(theTr)      
      });
    }
  })
}
load()



// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;



  
const form = layui.form;
form.verify({
    ctname: [
        /^[\u4E00-\u9FA5]+$/,
        "分类名只能是中文"
    ],
    aliname: [
        /^[a-z0-9]+$/,
        "小写英文和数字组成"
    ]
})